<%--
  Created by Jiang Tao 2017/4/23
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<style type="text/css">
    #container {
        max-width: 800px;
        height: 500px;
        margin: 1em auto;
    }
    #container2 {
        max-width: 600px;
        height: 400px;
        margin: 1em auto;
    }
</style>

<!--highcharts-->
<script src="BJUI/plugins/highcharts/highcharts.js"></script>
<script src="BJUI/plugins/highcharts/themes/sand-signika.js"></script>

<script type="text/javascript">
    $(function () {
        initSelect(true, "#departList", ${departList}, false);
        $.CurrentNavtab.find("#executeTime").val((new Date()).FormatDate("yyyy-MM"))
        var departName=${departName==null?"本部门":departName};
        var datas = ${datas}
        var chart = new Highcharts.chart('container', {
            chart: {
                type: 'column',
                options3d: {
                    enabled: true,
                    alpha: 5,
                    beta: 2,
                    depth: 15
                }
            },
            title: {
                text: departName+'--部门考勤柱状直观图'
            },
            xAxis: {
                categories: datas.names
            },
            yAxis: {
                title: {
                    text: '次数'
                },
                allowDecimals:false
            },
            series: [{
                name: '姓名',
                data: datas.ciShus,
                dataLabels: {
                    enabled: true
                }
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 50
                    },
                    // Make the labels less space demanding on mobile
                    chartOptions: {
                        yAxis: {
                            labels: {
                                align: 'left',
                                x: 0,
                                y: -2
                            },
                            title: {
                                text: ''
                            }
                        }
                    }
                }]
            },
            tooltip: {
                pointFormatter: function() {
                    return '<span>次数：</span>'+this.y+'</b>.'
                }
            },
            plotOptions: {
                column: {
                    point: {                  // 每个扇区是数据点对象，所以事件应该写在 point 下面
                        events: {
                            // 默认是点击突出，这里屏蔽掉
                            click: function() {
                                var executeTime = $.CurrentNavtab.find("#executeTime").val();
                                if(Dracula.util.isEmpty(executeTime)){
                                    $(this).alertmsg("时间不能空")
                                }
                                BJUI.dialog({
                                    id: 'personalDetail',
                                    url: 'task/analysis/personalDetail.shtml?username=' + datas.names[this.x]+'&time='+executeTime,
                                    title: datas.names[this.x]+'  '+executeTime+' 月出勤明细',
                                    mask: true,
                                    height: 250,
                                    width: 450
                                });
                            }
                        }
                    }
                }
            }
        });

        var chart2 = new Highcharts.chart('container2', {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: departName+'--出勤比例'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth:35,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    states: {
                        hover: {
                            enabled: false
                        }
                    },
                    slicedOffset: 20,         // 突出间距
                    point: {                  // 每个扇区是数据点对象，所以事件应该写在 point 下面
                        events: {
                            // 鼠标滑过是，突出当前扇区
                            mouseOver: function() {
                                this.slice();
                            },
                            // 鼠标移出时，收回突出显示
                            mouseOut: function() {
                                this.slice();
                            },
                            // 默认是点击突出，这里屏蔽掉
                            click: function() {
                                return false;
                            }
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '出勤次数占比',
                data: datas.bie
            }]
        });


        $.CurrentNavtab.find("#highcharform").on("click",function () {
            var executeTime = $.CurrentNavtab.find("#executeTime").val();
            departName=$.CurrentNavtab.find("#departList").find("option:selected").text();
            if(Dracula.util.isEmpty(executeTime)){
                $(this).alertmsg("error","日期不能为空");
            }
            var departId = parseInt($.CurrentNavtab.find("#departList").val());
            Dracula.post("task/analysis/data.shtml?departId="+departId+"&time="+executeTime,null,function (json) {
                if(json.code==0){
                    datas=json.data
                    chart.update({
                        series: [{
                            data: datas.ciShus
                        }],
                        xAxis: {
                            categories: datas.names
                        },
                        title: {
                            text: departName+'--考勤柱状直观图'
                        }
                    });
                    chart2.update({
                        series: [{
                            data: json.data.bie
                        }]
                    });

                }else {
                    $(this).alertmsg("error","查询出错");
                }
            });

        })
    });
</script>

<div class="bjui-pageHeader"
     style="height: auto; padding-top: 10px; padding-bottom: 10px;">
    <form id="pagerForm" class="pageForm" data-toggle="ajaxsearch" method="post">
        <div class="bjui-searchBar">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>任务时间：</label>
                        <input type="text" data-pattern="yyyy-MM"
                               id="executeTime" name="executeTime" data-toggle="datepicker" data-max-date="%y"
                               class="form-control" data-rule="required;"/>&nbsp;
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>部门</label>
                        <select name="departId" id="departList" data-width="200"
                                class="form-control" data-toggle="selectpicker" data-size="10" data-rule="required;">
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <button id="highcharform" class="btn-primary" data-icon="search">查询</button>
                        &nbsp; <a class="btn btn-orange" href="javascript:;"
                                  onclick="resetFormAndSearch()" data-icon="undo">清空查询</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="bjui-pageContent">
    <div id="container"></div>
    <div id="container2"></div>
</div>



